/*                                         请你看仙女座流星雨！
⛦-----------      ⛦---------------      ⛦-----         ⛦----------------
⛦-----------   ⛦-----------    ⛦---------------------    ⛦-----------   许愿：“和挚友多聊聊天！！！”
⛦-----------       ⛦-----------        ⛦-----------        ⛦-----------  ⛦-----------
*/

<template>
  <div id="alice">
    <commonHead :childName="childName" :fatherName="fatherName"></commonHead>

    <el-button  type="success" size="small" @click="div2_Visible = true">添加</el-button>
    <el-button  type="danger" size="small" @click="div1_Visible = true">删除</el-button>
    <el-button  size="small">上架</el-button>
    <el-button  size="small">下架</el-button>

    <div id="crazy_hat">
      <div class="div_out">

        <div class="span">
          <span class="star">*</span> 医生名称：
          <div class="div_inner">
            <el-input v-model="hospital_name" placeholder="请输入医生名称"></el-input>
          </div>
        </div>

        <div class="span">
          <span class="star">*</span> 科室名称：
          <div class="div_inner">
            <el-select v-model="department_selected_ID" placeholder="选择科室名称"   size="small">
              <el-option v-for="item in department_table_data" :key="item.id" :label="item.departmentName" :value="item.id">
                {{item.departmentName}}
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="span">
          <span class="star">*</span> 医院名称：
          <div class="div_inner">
            <el-select v-model="hospital_selected_ID" placeholder="选择医院名称"   size="small">
              <el-option v-for="item in hospital_table_data" :key="item.id" :label="item.hospitalName" :value="item.id">
                {{item.hospitalName}}
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="span">
          <el-button type="success" size="small" @click="re_load">查询</el-button>
        </div>

        <div class="span">
          <el-button  size="small" @click="reset_search">重置</el-button>
        </div>


        <div>
          <el-table
            :data="doctor_table_data"
            style="width: 100%"
            @selection-change="handleSelectionChange">

            <el-table-column
              type="selection"
              width="55">
            </el-table-column>

            <el-table-column
              type="index"
              width="50">
            </el-table-column>

            <el-table-column
              prop="doctorName"
              sortable
              label="医生名称">
            </el-table-column>

            <el-table-column
              prop="doctorTitleBean.titleName"
              label="医生职称">
            </el-table-column>

            <el-table-column
              prop="hospitalBean.hospitalName"
              label="所属医院">
            </el-table-column>

            <el-table-column
              prop="departmentBean.departmentName"
              sortable
              label="所属科室">
            </el-table-column>



            <el-table-column
              label="操作">
              <el-button @click="show_detal" type="text" size="small">查看</el-button>
              <el-button @click="edit_it" type="text" size="small">编辑</el-button>
              <el-button @click="delete_it = true" type="text" size="small">删除</el-button>
            </el-table-column>


          </el-table>

        </div>

      </div>

      <!--添加医院对话框-->
      <el-dialog title="添加医生" :visible.sync="div2_Visible">
        <Add></Add>
      </el-dialog>

      <!--删除对话框-->
      <el-dialog
        title="提示"
        :visible="div1_Visible"
        width="30%"
        :before-close="handleClose">
        <Del></Del>
      </el-dialog>




    </div>



  </div>


</template>

<script>

  import commonHead from '../system/common/commonHead'
  import Add from './doctor_manage/AddDoctor'
  import Del from './doctor_manage/DeleteDoctor'

  export default {
    name: "DoctorManage",
    components: {
      commonHead, Add, Del
    },
    data: function () {
      return {
        childName: '医生管理',
        fatherName:"医疗服务",
        department_table_data: null,
        hospital_table_data: null,
        hospital_selected_ID:null,
        department_selected_ID: null,
        doctor_table_data: null,



      }
    },
    methods: {
      getDepartmentTableData: function () {
        this.axios.get('medical/department')
          .then(response => {
            this.department_table_data = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      getHospitalData: function () {
        this.axios.get('medical/hospital')
          .then(response => {
            this.hospital_table_data = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      getDoctorData: function () {
        this.axios.get('medical/doctor')
          .then(response => {
            this.doctor_table_data = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      }





    },
    created: function () {
      //生命周期函数,用来初始化数据，比如发送初始化数据请求。vue实例创建后，即向后端发送请求，获取json格式的字符串数据
      this.getDepartmentTableData();
      this.getHospitalData();
      this.getDoctorData();
    }


  }






</script>

<style scoped>

  #alice{
    width:1500px;
    margin: 0 auto;
    margin-top: 5px;

  }

  #crazy_hat{
    height:50px;
    background-color:#eeeeee;
    text-align:center;
    line-height:50px;
    margin-top: 10px;
  }

  .star{
    color:red;
  }


  .div_out {
    margin-top: 15px;
  }


  .div_inner{
    position: relative;
    font-size: 14px;
    display: inline-block;

  }

  .content{
    width:500px;
    height:300px;
    border: 1px solid;

  }


  .span{
    display: inline-block;
    margin-left: 30px;
  }

</style>
